<!-- 退款 refund -->
<template>
  <div class="content">
    <!-- 统计 -->
    <div class="statistics">
      <div :class="[{'active': activeName === 9 || activeName === '9' }]" @click="handleTabClick(9)"><span>全部申请</span>
        (<span>{{statistics.all}}</span>)</div>
      <div :class="[{'active': activeName === 0 || activeName === '0' }]" @click="handleTabClick('0')"><span>待处理</span>
        (<span>{{statistics.pendingCount}}</span>)</div>
      <div :class="[{'active': activeName === 2}]" @click="handleTabClick(2)"><span>已处理</span> (<span>{{statistics.processedCount}}</span>)</div>
      <div :class="[{'active': activeName === 3}]" @click="handleTabClick(3)"><span>已拒绝</span> (<span>{{statistics.rejectedCount}}</span>)</div>
    </div>
    <!-- 统计 -->
    <el-form :model="query" ref="form" size="medium" class="search-form">
      <el-form-item>
        <el-input v-model="query.keyword" placeholder="请输入订单编号" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label="" prop="timeRange">
        <TimeRangePicker v-model="query.timeRange" type="datetimerange" :defaultTime="['00:00:00', '23:59:59']"
                         startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
      </el-form-item>
      <el-form-item label="" prop="type">
        <el-select v-model="query.type" placeholder="请选择类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="仅退款" value="0"></el-option>
          <el-option label="退货退款" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="10px">
        <Cbutton @click="handleSearch" :btnloading="tableLoading">查询</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <!-- <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="全部" :name="'9'"></el-tab-pane>
        <el-tab-pane label="待商家处理" :name="'0'"></el-tab-pane>
        <el-tab-pane label="待买家处理" :name="'1'"></el-tab-pane>
      </el-tabs> -->
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit stripe highlight-current-row
                empty-text="没有符合条件的订单">
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="order-item-detail-goods-box">
              <div class="order-item-detail-goods-single" v-for="(item,index) in props.row.items" :key="item.id">
                <el-divider v-if="index > 0"></el-divider>
                <el-row>
                  <el-col :span="8">
                    <div class="goods-img-and-title-box">
                      <span class="goods-img-box">
                        <el-image class="product-img-small" fit="contain" :src="item.productPic"></el-image>
                      </span>
                      <span class="goods-title-box">{{item.productName}}</span>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div class="goods-num-and-price-box">
                      <p>
                        <span>规格</span>
                        <span>单价</span>
                        <span>实价</span>
                        <span>积分单价</span>
                        <span>购买数量</span>
                      </p>
                      <p>
                        <span>{{item.sp1 ? item.sp1:''}}{{item.sp2 ? ','+item.sp2:''}}{{item.sp3 ? ',' + item.sp3: ''}}</span>
                        <span>￥{{item.productPrice}}</span>
                        <span>￥{{item.returnAmount}}</span>
                        <span>{{item.returnIntegration}}</span>
                        <span>{{item.productCount}}</span>
                      </p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="orderSn" label="订单编号" align="center" min-width="170"></el-table-column>
        <el-table-column prop="shopName" label="商铺" align="center" min-width="110"></el-table-column>
        <el-table-column prop="returnSn" label="退款编号" align="center" min-width="140"></el-table-column>
        <el-table-column prop="handleMan" label="处理人" align="center"></el-table-column>
        <el-table-column prop="type" label="退款类型" align="center">
          <!-- 0：仅退款 1：退货退款 -->
          <template slot-scope="props">
            <span v-if="props.row.type === 1">{{props.row.type === 1 ? '退货退款' : ''}}</span>
            <span v-if="props.row.type === 0">{{props.row.type === 0 ? '仅退款' : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column prop="returnIntegration" label="退款积分" align="center"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" align="center" min-width="160">
          <template slot-scope="props">
            {{props.row.createTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="delayTime" label="超时时间" align="center" min-width="160">
          <template slot-scope="props">
            {{props.row.delayTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="退款状态" align="center">
          <!-- 0->待处理；1->退货中；2->已完成；3->已拒绝 ,4 -> 已关闭-->
          <template slot-scope="props">
            <el-tag v-if="props.row.status === 4" size="small" type="info">已关闭</el-tag>
            <el-tag v-if="props.row.status === 3" size="small" type="danger">已拒绝</el-tag>
            <el-tag v-if="props.row.status === 2" size="small" type="success">已完成</el-tag>
            <el-tag v-if="props.row.status === 1" size="small" type="warning">退货中</el-tag>
            <el-tag v-if="props.row.status === 0" size="small" type="">待处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="props">
            <el-link type="primary" @click="gotoDetailById(props.row.id)">详情</el-link>
            <!-- <template v-if="props.row.status === 0">
              <el-divider direction="vertical"></el-divider>
              <el-link type="success" @click="handleSend(props.row)">处理</el-link>
            </template> -->
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

  </div>
</template>

<script>
import { ExportList, ExportStr } from '@/utils'
import { GetReturnApplyList, GetReturnApplyStatic } from '@/api/order'
import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: { TimeRangePicker },
  data () {
    return {
      activeName: '9',
      query: {
        orderApplyState: '9',
        keyword: '',
        type: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      orderStatusList: ExportList('orderStatusList'),
      deliveryDialogVisible: false,
      deliveryData: {},
      statistics: {
        all: 0,
        pendingCount: 0,
        processedCount: 0,
        rejectedCount: 0
      } // 统计数据
    } // return
  },
  props: {},
  watch: {},
  computed: {
    ...mapGetters([
      'routerParams'
    ])
  },
  created () {
    if (this.routerParams['$pageName'] === this.$route.name) {
      this.activeName = this.routerParams.activeName
      this.query.orderApplyState = this.activeName
      this.query.pageNum = this.routerParams.pageNum
      this.query.pageSize = this.routerParams.pageSize
    }
  },
  mounted () {
    this.getList()
    this.getStatic()
  },
  methods: {
    getStatic () {
      // 申请状态：0->待处理；1->退货中；2->已完成；3->已拒绝 4->已关闭
      let allCount = 0
      GetReturnApplyStatic().then(res => {
        const data = res.data || []
        data.forEach(e => {
          if (e.count) {
            allCount += e.count
          } else {
            allCount += 0
          }
          if (e.status === 0 || e.status === '0') {
            this.statistics.pendingCount = e.count || 0
          }
          if (e.status === 2 || e.status === '2') {
            this.statistics.processedCount = e.count || 0
          }
          if (e.status === 3 || e.status === '3') {
            this.statistics.rejectedCount = e.count || 0
          }
        })
        this.statistics.all = allCount
      }).catch(e => { })
    },
    handleTabClick (val) {
      this.query.pageNum = 1
      this.query.orderApplyState = val.name || val
      this.activeName = val
      this.getList()
    },
    getList () {
      let params = {}
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        params.startTime = this.query.timeRange[0]
        params.endTime = this.query.timeRange[1]
      }
      if (this.query.keyword) params.keyword = this.query.keyword
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize
      params.orderApplyState = this.query.orderApplyState
      params.type = this.query.type

      this.tableLoading = true
      GetReturnApplyList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleSend (row) {
      this.deliveryDialogVisible = true
      this.deliveryData = row
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    },
    dealListStr (key, type) {
      return ExportStr(key, type)
    },
    gotoDetailById (id) {
      if (!id) {
        this.$message({
          type: 'warning',
          message: '订单信息错误，请刷新页面后重试'
        })
        return
      }
      this.$store.dispatch('setPageRouterParams', {
        $pageName: this.$route.name,
        activeName: this.activeName,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        pageRow: this.query.pageSize
      })
      this.$router.push({ name: 'pms:order:refund:detail', query: { id } })
    },
    getOprResult (val) {
      if (val) {
        this.getList()
      }
    }

  }
}

</script>
<style lang='scss' scoped>
.statistics {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  div {
    margin-right: 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    padding: 7px 20px;
    cursor: pointer;
  }
  .active {
    background: rgba(24, 144, 255, 1);
    border-color: rgba(24, 144, 255, 1);
    color: white;
  }
}
.order-item-detail-goods-single .goods-img-box {
  width: 10%;
  img {
    max-width: 100%;
    min-height: 100%;
  }
}
.order-item-detail-goods-single .goods-title-box {
  width: 85%;
  margin-left: 3%;
  .product-img-small {
    width: 70px;
    height: 70px;
  }
}

.goods-img-and-title-box > span,
.goods-num-and-price-box > span {
  display: inline-block;
  vertical-align: middle;
}
.goods-num-and-price-box span {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 100px;
}
</style>
